<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>边框</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        /* 边框 */
        /*
          复合属性
            边框粗细
            边框类型,solid实线,dashed破折现,dotted点虚线,double双线,groove模拟3D效果线...
            边框颜色
         */
        border: 5px solid red;

        /*
          其他属性

          第一组:
            border-top-color
            border-top-width
            border-top-style

            border-bottom-color
            border-bottom-width
            border-bottom-style

            border-left-color
            border-left-width
            border-left-style

            border-right-color
            border-right-width
            border-right-style


          第二组:
            border-color
            border-width
            border-style
            一个参数表示所有边,二个参数表示上右(对边镜像),三个参数表示上右下(左镜像右),四个参数表示上右下左

          第三组:
            border-top
            border-right
            border-bottom
            border-left
            给三个参数,分别是边框粗细,样式,颜色


          CSS3提供的边框圆角
            border-radius
            参数是数值或者百分比

            border-top-right-radius       右上角弧度
            border-top-left-radius        左上角弧度
            border-bottom-right-radius    右下角弧度
            border-bottom-left-radius     左下角弧度


          补充:
          1.如果不想要边框,则border:0或者border:none
          2.如果容器是正方形,border-radius设置成100%则绘制一个圆形
          3.input文本框默认外层有一个蓝色的外框,它不属于边框,一般需要去除
            outline:none
          4.边框在默认情况下也占用空间,所以容器的横向和纵向大小需要加上对应的两边边框的粗细(盒模型)
        */
        border-color: green red yellow blue;
        border-radius: 10px;
      }

      /* 表格边框的标准css */
      table,
      td,
      th {
        border: 1px solid #ccc;
        border-collapse: collapse; /* 表格边框合并 */
        width: 800px;
        height: 35px;
        text-align: center; /* 表格文字居中 */
        margin: 0 auto; /* 表格居中 */
      }
    </style>
  </head>
  <body>
    <div></div>

    <hr />

    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>1</td>
        <td>jack</td>
        <td>25</td>
        <td>男</td>
        <td>
          <a href="#">操作</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>
